<template>
  <div class="index">
    <div class="shopping_cart">
      <div class="shopping_content">
        <div class="tips">
          <span>提示：确认商品收提交订单信息锁定库存，订单信息保留30分钟，请在规定时间完成现在付款并在待付款订单列表，上传打款凭证到后台审核，审核通过后会安排发货，超时会释放订单信息</span>
        </div>
        <div class="card">
          <div class="title">收货地址</div>
          <div class="address_cont" @click="changeAddr">
            <div class="cell-left" v-if="orderObj.userAddressId == 0">
              <div class="name">选择收货地址</div>
              <div class="desc">若您还未添加过收货地址，也可以点击此处添加</div>
            </div>
            <div class="content" v-if="orderObj.userAddressId">
              <div class="title">
                <span v-if="addressObj.isDefault" class="isDefalut">默认</span>
                <span>{{ addressObj.consignee }}</span>
                <span>{{ addressObj.phone }}</span>
              </div>
              <div class="adr">
                {{
                  addressObj.province +
                  addressObj.city +
                  addressObj.area +
                  addressObj.township +
                  addressObj.address
                }}
              </div>
            </div>
            <div class="icon">
              <u-icon name="arrow-right" color="#333" size="28"></u-icon>
            </div>
          </div>
        </div>
        <!-- <div class="card">
          <div class="title">打款人</div>
          <div class="cell">
            <div class="cell_label">打款人姓名</div>
            <div class="cell_value">
              <input
                type="text"
                v-model="orderObj.payerName"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="cell">
            <div class="cell_label">打款人日期</div>
            <div class="cell_value" @click="show = true">
              {{ orderObj.offlinePayTime || '请选择' }}
            </div>
          </div>
          <div class="remark">
            <p>公司打款，请填写详细公司名称</p>
            <p>打款日期请填写打款截图中的日期</p>
            <p>私人打款，无法开票，请知悉</p>
            <p>如单地址采购金额不足3000元，运费需到付</p>
          </div>
        </div> -->
        <div class="card">
          <div class="title">打款信息（对公）</div>
          <div class="cell">
            <div class="cell_label">户名</div>
            <div class="cell_value text">浙江后浪供应链有限公司</div>
          </div>
          <div class="cell">
            <div class="cell_label">开户行</div>
            <div class="cell_value text">杭州银行宁围小微综合支行</div>
          </div>
          <div class="cell">
            <div class="cell_label">账号</div>
            <div class="cell_value text">3301041060000244859</div>
          </div>
        </div>
        <div class="card">
          <div class="title">打款信息（对私）</div>
          <div class="cell">
            <div class="cell_label">户名</div>
            <div class="cell_value text">洪惜屿</div>
          </div>
          <div class="cell">
            <div class="cell_label">开户行</div>
            <div class="cell_value text">浙江泰隆商业银行股份有限公司萧山北干小微企业专营支行</div>
          </div>
          <div class="cell">
            <div class="cell_label">账号</div>
            <div class="cell_value text">6214808801032864007</div>
          </div>
        </div>
        <div class="card">
          <div class="title">打款信息（企业支付宝）</div>
          <div class="cell">
            <div class="cell_label">户名</div>
            <div class="cell_value text">浙江后浪供应链有限公司</div>
          </div>
          <div class="cell">
            <div class="cell_label">账号</div>
            <div class="cell_value text">3818017101@qq.com</div>
          </div>
        </div>
        <!-- <div class="card">
          <div class="title">打款截图</div>
          <div class="upload">
            <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              multiple
              :maxCount="3"
              :previewFullImage="true"
            ></u-upload>
          </div>
        </div> -->
      </div>
      <div class="shopping_bottom">
        <div class="shopping_money">
          <span>待支付</span>
          <span class="money"><u>￥</u>{{totalMoney}}</span>
        </div>
        <div class="btn">
          <u-button type="primary" color="#FC6420" text="提交订单" @click="submitOrder"></u-button>
        </div>
      </div>
    </div>
    <!-- <u-datetime-picker
      ref="datetimePicker"
      :show="show"
      v-model="value1"
      mode="datetime"
      :formatter="formatter"
      :closeOnClickOverlay="true"
      @confirm="confirmDate"
      @cancel="show = false"
      @close="show = false"
    ></u-datetime-picker> -->
  </div>
</template>

<script>
import auth from '../../api/auth.js'
import { normalTime } from '../../utils/index'
export default {
  data() {
    return {
      show: false,
      value1: Number(new Date()),
      showSkuModal: false,
      // 订单信息
      productOrderObj: {},
      fileList1: [],
      // 创建订单
      orderObj: {
        orderId: null,
        buyerRemarks: '', //买家备注
        cardIds: '', //多个购物车记录id数组，来源是购物车时不能为空
        productAmount: 0, //购买商品数量 ，来源是商品详情不能为空
        productId: 0, //商品ID ，来源是商品详情不能为空
        productSkuId: 0, //商品规格id，来源是商品详情不能为空
        source: 0, //订单创建来源，1：商品详情页，2：购物车列表
        userAddressId: 0, //用户选择地址id
      },
      totalMoney: 0,
      addressObj: {},
    }
  },
  onReady() {
    // 微信小程序需要用此写法
    // this.$refs.datetimePicker.setFormatter(this.formatter)
  },
  onLoad(option) {
    this.orderObj.source = +option.source
    this.totalMoney = option.totalMoney
    if(this.orderObj.source == 1) {
      let skuObj = JSON.parse(option.skuObj)
      this.orderObj.productAmount = skuObj.productAmount
      this.orderObj.productId = skuObj.productId
      this.orderObj.productSkuId = skuObj.productSkuId
      delete this.orderObj.cardIds
    } else if(this.orderObj.source == 2) {
      this.orderObj.cardIds = option.cardIds.split(',').map(Number)
      delete this.orderObj.productAmount
      delete this.orderObj.productId
      delete this.orderObj.productSkuId
    }else if(this.orderObj.source == 3) {
      this.orderObj.orderId = option.orderId
      delete this.orderObj.productAmount
      delete this.orderObj.productId
      delete this.orderObj.productSkuId
      delete this.orderObj.cardIds
    }
    this.getDefUserAddress()
  },
  watch: {},
  methods: {
    async getDefUserAddress() {
      let res = await auth.getDefUserAddress()
      this.addressObj = res
      this.orderObj.userAddressId = res.id
    },
    // formatter(type, value) {
    //   if (type === 'year') {
    //     return `${value}年`
    //   }
    //   if (type === 'month') {
    //     return `${value}月`
    //   }
    //   if (type === 'day') {
    //     return `${value}日`
    //   }
    //   return value
    // },
    // confirmDate(obj) {
    //   this.show = false
    //   this.orderObj.offlinePayTime = normalTime(obj.value, '-')
    //   console.log(this.orderObj.offlinePayTime)
    // },
    // // 删除图片
    // deletePic(event) {
    //   this[`fileList${event.name}`].splice(event.index, 1)
    // },
    // 新增图片
    // async afterRead(event) {
    //   // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    //   let lists = [].concat(event.file)
    //   let fileListLen = this[`fileList${event.name}`].length
    //   lists.map((item) => {
    //     this[`fileList${event.name}`].push({
    //       ...item,
    //       status: 'uploading',
    //       message: '上传中',
    //     })
    //   })
    //   for (let i = 0; i < lists.length; i++) {
    //     const result = await this.uploadFilePromise(lists[i].url)
    //     let item = this[`fileList${event.name}`][fileListLen]
    //     this[`fileList${event.name}`].splice(
    //       fileListLen,
    //       1,
    //       Object.assign(item, {
    //         status: 'success',
    //         message: '',
    //         url: result,
    //       })
    //     )
    //     fileListLen++
    //     console.log(this.fileList1)
    //   }
    // },
    // uploadFilePromise(url) {
    //   return new Promise((resolve, reject) => {
    //     let a = uni.uploadFile({
    //       url: 'https://houlangguzi.com/mall/common/file/uploadFile',
    //       filePath: url,
    //       name: 'file',
    //       formData: {
    //         user: 'test',
    //       },
    //       success: (res) => {
    //         setTimeout(() => {
    //           resolve(res.data.data)
    //         }, 1000)
    //       },
    //     })
    //   })
    // },
    /**
     * 添加收货地址、修改收货地址
     * 有地址的时候修改，没有默认地址的时候添加收货地址
     */
    changeAddr() {
      let that = this
      if (this.orderObj.userAddressId) {
        uni.navigateTo({
          url: `/subPackages/WoDe/address?id=${this.orderObj.userAddressId}`,
          events: {
            someEvent: function (data) {
              that.$set(that, 'addressObj', data.form)
              that.orderObj.userAddressId = data.form.id
            },
          },
        })
      } else {
        let that = this
        // let form = JSON.stringify(this.address)
        uni.navigateTo({
          url: `/subPackages/WoDe/editAddr`,
          // url: `/pages/editAddr/editAddr?form=${form}`,
          events: {
            someEvent: function (data) {
              that.$set(that, 'addressObj', data.form)
              that.orderObj.userAddressId =  data.form.id
              that.getDefUserAddress()
            },
          },
        })
      }
    },
    // 提交订单
    async submitOrder() {
      let params = {...this.orderObj}
      try {
        let res = await auth.submitProductOrder(params)
        uni.reLaunch({
          url: `/subPackages/WoDe/orderList?active=1`,
        })
      }catch(err){}
    }
  },
}
</script>

<style lang="scss">
.index {
  height: 100%;
  background: #f5f7f9;
  .shopping_cart {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .shopping_content {
      flex: 1;
      overflow: auto;
      .tips {
        font-size: 24rpx;
        background: #ffff92;
        color: #e45656;
        padding: 24rpx 32rpx;
        margin-bottom: 20rpx;
      }
      .card {
        background: #fff;
        padding: 24rpx 32rpx;
        margin-bottom: 20rpx;
        border-radius: 16rpx;
        .title {
          font-size: 36rpx;
          line-height: 64rpx;
          font-weight: 500;
          display: flex;
          align-items: center;
          span {
            margin-right: 16rpx;
          }
          .isDefalut {
            font-weight: normal;
            line-height: 36rpx;
            display: inline-block;
            font-size: 20rpx;
            color: #FC6420;
            padding: 0 16rpx;
            background: #333333;
            border-radius: 8rpx;
          }
        }
        .address_cont {
          width: 100%;
          height: 152rpx;
          display: flex;
          align-items: center;
          background: #f5f7f9;
          padding: 36rpx 20rpx;
          box-sizing: border-box;
          border-radius: 8rpx;
          .cell-left {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .name {
              color: #222;
              font-size: 28rpx;
            }
            .desc {
              color: #999;
              font-size: 20rpx;
            }
          }
          .content {
            flex: 1;
            margin: 0 16rpx;
            .title {
              font-size: 30rpx;
              font-weight: 500;
              line-height: 50rpx;
              span:first-child {
                margin-right: 16rpx;
              }
            }
            .adr {
              font-size: 24rpx;
              color: rgba(0, 0, 0, 0.6);
            }
          }
          .icon {
            width: 40rpx;
            height: 40rpx;
          }
        }
        .cell {
          display: flex;
          height: 96rpx;
          line-height: 96rpx;
          align-items: center;
          .cell_label {
            width: 240rpx;
            font-size: 26rpx;
          }
          .cell_value {
            color: #757575;
            font-size: 26rpx;
            flex: 1;
            input {
              display: inline-block;
              width: 100%;
              height: 100%;
              line-height: 1;
            }
          }
          .right {
            display: flex;
            justify-content: flex-end;
          }
          .text {
            color: #333;
            text-align: right;
            line-height: 44rpx;
          }
        }
        .remark {
          padding: 20rpx;
          margin-top: 20rpx;
          background: #f8fafb;
          border: 2px solid #e8e9ea;
          border-radius: 8rpx;
          p {
            color: #8c9398;
            font-size: 20rpx;
            line-height: 36rpx;
          }
        }
      }
      .swich {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          span {
            font-size: 20rpx;
            color: #fa5d0a;
            font-weight: normal;
            margin-left: 16rpx;
          }
        }
      }
    }
    .shopping_bottom {
      height: 104rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;
      padding-bottom: 40rpx;
      background: #fff;
      border-top: 1px solid #e8e8e8;
      .shopping_money {
        display: flex;
        align-items: center;
        span {
          color: #9bb3b7;
          font-size: 20rpx;
          margin-right: 8rpx;
        }
        .money {
          color: #fa5d0a;
          font-size: 36rpx;
          font-weight: 500;
          display: flex;
          align-items: baseline;
          u {
            font-size: 24rpx;
          }
        }
      }
      .btn {
        width: 200rpx;
        height: 72rpx;
      }
    }
  }
}
</style>
